{include file="public/header" /}
<link href="__CSS__/plugins/iCheck/custom.css" rel="stylesheet">
<body class="gray-bg" id="container">
<div class="wrapper wrapper-content animated fadeInRight">

    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>注册当日扫码次数比例</h5>

        </div>
        <div class="ibox-content">
            <div class="example-wrap">
                <div class="example">
                    <div class="content" id="content" style="height: 500px;">
                    </div>
                </div>
                <!-- End Example Pagination -->
            </div>
        </div>
    </div>
    <!-- End Panel Other -->


</div>

{include file="public/footer" /}

<script>

    $(document).ready(function() {

        var app = new Vue({
            el: '#container',
            data: {

            },
            methods: {

            }
        })

        var echartModel = echarts.init(document.getElementById('content'));

        echartModel.on('click', function (params) {
            console.log(params.dataIndex)
            var times = params.dataIndex
            var title = ''
            if (times == 0) {
                title = '1单'
            } else if (times == 1) {
                title = '2单'
            } else if (times == 2) {
                title = '3单'
            } else {
                title = '3单以上'
            }

            layer.open({
                type: 2,
                title: '订单状态分布--' + title,
                shadeClose: true,
                shade: false,
//                maxmin: true, //开启最大化最小化按钮
                area: ['600px', '450px'],
                content: '{:url("registerOrderInfo")}?times=' + params.dataIndex
            });
        });

        function setData() {

            $.ajax({
                type: 'post',
                url: "{:url('registerOrderData')}",
                dataType: 'json',
                data: {
                },
                success: function (data) {

                    echartModel.setOption({
                        title: {
                            text: '注册当日扫码次数比例',
                            subtext: '',
                            x: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            data: data["legendData"]
                        },
                        series: [
                            {
                                name: '扫码次数',
                                type: 'pie',
                                radius: '55%',
                                center: ['50%', '60%'],
                                data: data["data"],
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    })

                },
                error: function (data) {

                }
            })

        }

        setData();

    })


</script>
</body>
</html>
